
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Users, FileText, HelpCircle, Target } from "lucide-react";

interface CommunityStatsProps {
  role: 'student' | 'teacher';
}

export const CommunityStats = ({ role }: CommunityStatsProps) => {
  if (role === 'teacher') {
    return (
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
        <Card className="bg-white dark:bg-gray-800 shadow-sm border">
          <CardContent className="p-6 text-center">
            <div className="flex items-center justify-center mb-2">
              <Users className="w-8 h-8 text-blue-600" />
            </div>
            <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">847</div>
            <div className="text-sm text-gray-600 dark:text-gray-400">Active Teachers</div>
          </CardContent>
        </Card>
        <Card className="bg-white dark:bg-gray-800 shadow-sm border">
          <CardContent className="p-6 text-center">
            <div className="flex items-center justify-center mb-2">
              <FileText className="w-8 h-8 text-green-600" />
            </div>
            <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">1,234</div>
            <div className="text-sm text-gray-600 dark:text-gray-400">Shared Resources</div>
          </CardContent>
        </Card>
        <Card className="bg-white dark:bg-gray-800 shadow-sm border">
          <CardContent className="p-6 text-center">
            <div className="flex items-center justify-center mb-2">
              <HelpCircle className="w-8 h-8 text-purple-600" />
            </div>
            <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">89</div>
            <div className="text-sm text-gray-600 dark:text-gray-400">Weekly Questions</div>
          </CardContent>
        </Card>
        <Card className="bg-white dark:bg-gray-800 shadow-sm border">
          <CardContent className="p-6 text-center">
            <div className="flex items-center justify-center mb-2">
              <Target className="w-8 h-8 text-orange-600" />
            </div>
            <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">67</div>
            <div className="text-sm text-gray-600 dark:text-gray-400">Ongoing Collaborations</div>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <Card className="bg-white dark:bg-gray-800 shadow-sm border">
      <CardHeader>
        <CardTitle className="text-lg font-semibold">Community Stats</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <span className="text-gray-700 dark:text-gray-300">Active Students</span>
            <span className="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100 px-2 py-1 rounded text-sm">2,847</span>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-gray-700 dark:text-gray-300">Study Groups</span>
            <span className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100 px-2 py-1 rounded text-sm">89</span>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-gray-700 dark:text-gray-300">Daily Discussions</span>
            <span className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100 px-2 py-1 rounded text-sm">342</span>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-gray-700 dark:text-gray-300">Active Teachers</span>
            <span className="bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-100 px-2 py-1 rounded text-sm">67</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};
